<div class="row">
    <div class="col-md-6 col-xs-12">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-inverse">
                        <h4 class="card-header-title">
                            管理系统
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="toolbar">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-xs-12 col-md-12">
                                        <div class="button-container">
                                            <?php foreach ($citem as $key=>$value) :?>
                                            <button class="btn btn-<?= $value['Style']?> btn-sm" data-options='<?= $value['Options']?>' data-title="<?= $value['Title']?>">
                                                <i class="fa fa-<?= $value['Icon']?>"></i> <?= $value['Title']?>
                                            </button>
                                            <?php endforeach;?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="material-datatables">
                            <table data-url="<?= \yii\helpers\Url::to([$module->RouteURL,'groupid'=>1])?>" class="table table-striped table-hover display responsive nowrap" cellspacing="0" width="100%">
                                <thead>
                                <tr class="text-danger">
                                    <th></th>
                                    <th>角色名称</th>
                                    <th>启用状态</th>
                                    <th>备注描述</th>
                                    <th>用户操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xs-12">
        <div class="card">
            <div class="card-header card-header-inverse">
                <h4 class="card-header-title">
                    权限列表
                </h4>
            </div>
            <div class="card-body">
                <div class="toolbar">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xs-12 col-md-12" style="margin-bottom: 2%">
                                <div class="button-container">
                                    <button class="btn btn-primary btn-sm" id="btn_sureAll">
                                        <i class="fa fa-check"></i> 保存
                                    </button>
                                    <button class="btn btn-red btn-sm" id="btn_refreshAll">
                                        <i class="fa fa-refresh"></i> 刷新
                                    </button>
                                    <button class="btn btn-success btn-sm" id="btn_expandAll">
                                        <i class="fa fa-plus-square-o"></i> 展开
                                    </button>
                                    <button class="btn btn-indigo btn-sm" id="btn_collapseAll">
                                        <i class="fa fa-minus-square-o"></i> 折叠
                                    </button>
                                    <button class="btn btn-warning btn-sm" id="btn_checkAll">
                                        <i class="fa fa-check-square-o"></i> 全选
                                    </button>
                                    <button class="btn btn-danger btn-sm" id="btn_uncheckAll">
                                        <i class="fa fa-square-o"></i> 反选
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="material-datatables">
                    <div id="procitytree"><div class="dataTables_empty" valign="top"><h4>没有匹配结果</h4></div></div>
                    <input type="hidden" value="" id="ids" />
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var columns = [{
            data: "Id",
            className: "hidden",

        },{
            data: "RoleName",
            className: "text-center",
            render: function (data, type, row, meta) {
                return window.cutString(data, 12);
            }
        }, {
            data: "Nullity",
            className: "text-center",
            render: function (data, type, row, meta) {
                return data == 0 ? "<i class='fa fa-check text-success'></i>" : "<i class='fa fa-times text-danger'></i>";
            }
        }, {
            width: '35%',
            data: "Remarks"
        }, {
            width: '25%',
            className: "text-center",
            data: "Id",
            render: function (data, type, row, meta) {
                return "<i data-options='{\"rid\":" + row.Id + ",\"gid\":" + row.GroupId + "}' class='fa fa-circle-o'></i>";
            }
        }];
        var _tb_ = $(".material-datatables>.table");
        _tb_.createPager(columns);

        _tb_.find('tbody').on('click', 'tr', function () {
            _tb_.find('tr.warning').removeClass('warning');
            $(this).addClass('warning');
            _tb_.find("tbody>tr>td>i.fa-dot-circle-o").attr("class", "fa fa-circle-o");
            var $data = $(this).find("td>i.fa-circle-o").attr("class", "fa fa-dot-circle-o").data();
            $("#ids").val(JSON.stringify($data.options));
            _treefun_($data.options);
        });

        var _tree_ = $('#procitytree');

        $(document).off("click", "#btn_refreshAll").on("click", "#btn_refreshAll", function () {
            var ids = $("#ids").val();
            if (ids.length == 0) return false;
            _treefun_(JSON.parse(ids));
        });

        $(document).off("click", "#btn_sureAll").on("click", "#btn_sureAll", function () {
            var ids = $("#ids").val();
            if (ids.length == 0) {
                swal('操作失败！', '请选择需要分配角色权限模块项', 'error');
                return false;
            }
            var chked = _tree_.treeview("getChecked");
            var chks = [];
            $.each(chked, function (i, j) {
                chks.push(j.id);
            });
            if (chks.length == 0) {
                swal('操作失败！', '没有选中任何权限模块项', 'error');
                return false;
            }
            var pdata = $.extend(JSON.parse(ids), { ids: chks.join(',') });
            $.post("/module/modify-module/", pdata, function (d) {
                if (d.statusCode === 200) {
                    swal('操作成功！', d.message, 'success');
                    return false;
                }
                swal('操作失败！', d.message, 'error');
            });
        });

        function _treefun_(_data_) {
            $.ajax({
                type: "post",
                url: "/module/group-module/",
                data: _data_,
                dataType: "json",
                success: function (data) {
                    if (!data || data.length == 0) {
                        _tree_.html('<div class="dataTables_empty" valign="top">没有匹配结果</div>');
                        return false;
                    }
                    _tree_.treeview({
                        expandIcon: 'fa fa-fw fa-plus-square-o',
                        collapseIcon: 'fa fa-fw fa-minus-square-o',
                        emptyIcon: 'fa fa-fw',
                        checkedIcon: 'fa fa-fw fa-check-square-o',
                        uncheckedIcon: 'fa fa-fw fa-square-o',
                        onhoverColor: "#f5f5f5",
                        selectedBackColor: "#faf2cc",
                        selectedColor: "rgba(0,0,0,.87)",
                        data: data,
                        multiSelect: true,
                        showCheckbox: true,
                        showTags: true,
                        onNodeSelected: function (event, node) {
                            nodefn(node);
                        },
                        onNodeChecked: function (event, node) {
                            nodefn(node);
                        },
                        onNodeUnselected: function (event, node) {
                            nodefn(node);
                        },
                        onNodeUnchecked: function (event, node) {
                            nodefn(node);
                        }
                    }).treeview('collapseAll', { silent: true });

                    function nodefn(node) {
                        if (!node) return false;
                        _tree_.treeview("toggleNodeChecked", [node.nodeId, { silent: true }]).treeview("toggleNodeSelected", [node.nodeId, { silent: true }]);
                        for (var i in node.nodes) {
                            nodefn(node.nodes[i]);
                        }
                    };

                    $(document).off("click", "#btn_expandAll").on("click", "#btn_expandAll", function () {
                        _tree_.treeview('expandAll', { silent: true });
                    });

                    $(document).off("click", "#btn_collapseAll").on("click", "#btn_collapseAll", function () {
                        _tree_.treeview('collapseAll', { silent: true });
                    });

                    $(document).off("click", "#btn_checkAll").on("click", "#btn_checkAll", function () {
                        _tree_.treeview('checkAll', { silent: true });
                    });

                    $(document).off("click", "#btn_uncheckAll").on("click", "#btn_uncheckAll", function () {
                        _tree_.treeview('uncheckAll', { silent: true });
                    });
                }
            });
        }
    });
</script>
